<template>
  <!-- 不需要唯一的根元素 -->
  <!-- vue2的写法是完全兼容vue3的 -->

  <!-- 依赖注入可以用了，有响应式 -->
  <!-- 案件修饰符不能数组了 -->
  <!-- 过滤器删除了 -->
  <input type="text" v-model="textValue" />
  <button @click="add">添加</button>

  <hr />

  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }} - <button @click="remove(item.id)">删除</button>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      textValue: "",
      list: [
        {
          id: 1,
          name: "zhangsan",
        },
        {
          id: 2,
          name: "lisi",
        },
      ],
    };
  },
  methods: {
    add() {
      this.list.push({
        id: new Date().getTime(),
        name: this.textValue,
      });
      this.textValue = "";
    },
    remove(id) {
      this.list = this.list.filter((item) => item.id !== id);
    },
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>
